<template>
  <div>
    <van-nav-bar fixed placeholder safe-area-inset-top title="杨婷的记账工具" @click-left="back">
      <template #left>
        <van-icon name="arrow-left" size="18px" color="#333" />
      </template>
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <div class="choose">
        <div @click="show1 = true" :class="[category == '请选择账目类别' ? '' : 'isChoose']"><span
            v-show="category != '请选择账目类别'">账目类别：</span>{{ category }}</div>
        <div @click="show2 = true" :class="[industry == '请选择行业' ? '' : 'isChoose']"><span
            v-show="industry != '请选择行业'">行业：</span>{{ industry }}</div>
        <div @click="show4 = true" :class="[date == '请选择日期' ? '' : 'isChoose']"><span
            v-show="date != '请选择日期'">日期：</span>{{ date }}</div>
        <div @click="show3 = true" :class="[notes == '请添加备注' ? '' : 'isChoose']"><span
            v-show="notes != '请添加备注'">备注：</span>{{
              notes }}</div>
      </div>
      <div class="accumulation">
        <van-field v-model="num" label="统计金额：" />
        <div @click="getTotalMoney">统 计</div>
      </div>
      <van-field v-model="money" label="金额：" placeholder="请输入金额" type="number" disabled />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">添 加</van-button>
      </div>
    </van-form>
    <van-popup v-model="show1" position="bottom" :style="{ height: '35%' }">
      <van-picker show-toolbar title="账目类别" visible-item-count="4" :columns="columns1" @confirm="onConfirm1"
        @cancel="onCancel1" />
    </van-popup>
    <van-popup v-model="show2" position="bottom" :style="{ height: '35%' }">
      <van-picker show-toolbar title="行业" visible-item-count="4" :columns="columns2" @confirm="onConfirm2"
        @cancel="onCancel2" />
    </van-popup>
    <van-popup v-model="show4" position="bottom" :style="{ height: '35%' }">
      <van-calendar v-model="show4" @confirm="onConfirm3" :value="date" :minDate="minDate" :max-date="maxDate" />
    </van-popup>
    <van-dialog v-model="show3" title="添加备注" show-cancel-button @confirm="goAdd">
      <van-field v-model="text" placeholder="请填写备注" rows="2" autosize type="textarea" maxlength="50" show-word-limit />
    </van-dialog>
  </div>
</template>

<script>
import { getTime } from "@/utils/publicMethods";

export default {
  data() {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 0, 1),
      idb: '',
      text: '',
      num: '',
      money: '',
      category: '请选择账目类别',
      industry: '请选择行业',
      date: '请选择日期',
      yearMonth: '',
      notes: '请添加备注',
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      columns1: [
        '支出', '收入'
      ],
      columns2: [
        '餐饮', '交通', '服饰', '购物', '娱乐', '生活缴费', '旅行', '医疗'
      ],
      columns3: [
        '生意', '工资', '奖金', '收红包', '其他人情', '收转账', '退款', '其他'
      ]
    }
  },
  created() {
    const _this = this
    const year = new Date().getFullYear()
    _this.minDate = new Date(year, 0, 1)
    _this.maxDate = new Date(year, 11, 31)
    _this.$store.dispatch('tools/setIdb').then(res => {
      _this.idb = res
    })
  },
  methods: {
    getTotalMoney() {
      let arr = this.num.split('+')
      this.money = arr.reduce((prev, cur) => {
        return +prev + +cur
      }, 0)
      this.num=''
    },
    onSubmit() {
      const _this = this
      if (_this.category == '请选择账目类别' || _this.industry == '请选择行业' || _this.date == '请选择日期' || _this.notes == '请添加备注' || _this.money == '') {
        _this.$toast('请检查所有选项是否填写')
        return
      }
      _this.idb.insert({
        tableName: "account",
        data: {
          time: _this.date,
          yearMonth: _this.yearMonth,
          category: _this.category,
          industry: _this.industry,
          notes: _this.notes,
          money: _this.money,
          name: 'yt'
        },
        success: () => {
          _this.$toast('添加账目成功')
          _this.category = '请选择账目类别'
          _this.industry = '请选择行业'
          _this.date = '请选择日期'
          _this.yearMonth = ''
          _this.notes = '请添加备注'
          _this.text = ''
          _this.money = ''
        },
      });
    },
    goAdd() {
      this.notes = this.text
    },
    onConfirm1(val) {
      this.columns2 = val == '支出' ? [
        '餐饮', '交通', '服饰', '购物', '娱乐', '生活缴费', '旅行', '医疗'
      ] : [
        '生意', '工资', '奖金', '收红包', '其他人情', '收转账', '退款', '其他'
      ]
      this.show1 = false
      this.category = val
    },
    onConfirm2(val) {
      this.show2 = false
      this.industry = val
    },
    onConfirm3(val) {
      this.date = getTime(null, val)
      this.yearMonth = getTime('month', val)
      this.show4 = false
    },
    onCancel1() {
      this.show1 = false
    },
    onCancel2() {
      this.show2 = false
    },
    back() {
      this.$router.go(-1)
    }
  },
}
</script>

<style lang="less" scoped>
.accumulation {
  display: flex;
  align-items: center;

  &>div:nth-child(2):active {
    opacity: 0.5;
  }

  &>div:nth-child(2) {
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #1989fa;
    font-size: 14px;
    color: #fff;
  }

  /deep/ .van-cell {
    width: 80%;
  }
}

.isChoose {
  color: #333 !important;
}

.choose {
  margin: 15px 0;

  &>div {
    font-size: 15px;
    color: #ccc;
    text-align: center;
    border: 1px solid #ddd;
    margin: 10px 15px;
    padding: 10px;
  }
}</style>